<template>
	<view class="dynamic-container">
		<view id="moments">
			<view class="moments__post" v-for="(post, index) in posts" :key="index" :id="'post-' + index">
				<view class="post-left"></view>
				<view class="post_right">
					<view class="post_title">
						<view class="post-username">11月26日<text class="post-time">21:00</text></view>
						<view class="follow">
							<uni-icons color="#999999" type="locked-filled" size="14"></uni-icons>
							<text>私密</text>
						</view>
					</view>
					<block v-if="post.type == 1">
						<!-- 心签 -->
						<view class="heart-sign" @click="pageTo('/pages/dynamic/heartSign')">
							<image class="heart-sign-img" :src="post.content.images[0]"></image>
							<view id="paragraph" class="heart-sign-text">{{ post.content.text }}</view>
						</view>
					</block>
					<block v-if="post.type == 2">
						<!-- 相册 -->
						<view class="thumbnails">
							<view :class="post.content.images.length === 1 ? 'my-gallery' : 'thumbnail'" v-for="(image, index_images) in post.content.images" :key="index_images">
								<image class="gallery_img" lazy-load mode="aspectFill" :src="image" :data-src="image" @tap="previewImage(post.content.images, index_images)"></image>
							</view>
						</view>
						<view id="paragraph" class="paragraph">{{ post.content.text }}</view>
					</block>
					<view @tap="pageTo(`/pages/found/youju/youju?id=${index + 1}`)" class="address">
						<text>{{ post.aear }}</text>
						<text v-if ="post.aear" class="yuans"></text>
						<text>{{ post.address }}</text>
					</view>
					
					<!-- 资料条 -->
					<view class="toolbar">
						<view class="timestamp">老爸</view>
						
						<view class="right-dot" @tap="show_win(index,true)">
							<!-- <image src="../../static/dongtai/dot.svg"></image> -->
							<uni-icons color="#777" type="more-filled" size="22"></uni-icons>
						</view>
						
						<view class="right-window" v-if="post.show_window">
							<view class="like" @tap="like(index)">
								<!-- <image src="../../static/dongtai/like.svg"></image> -->
								<view class="" style="margin: 0 auto;">
									<uni-icons color="#fff" type="heart" size="17"></uni-icons>
									<text class="like-text">{{ post.islike === 0 ? '赞' : '取消赞' }}</text>
								</view>
							</view>
							<view class="line" style="background-color: #BBB;height: 32upx;width: 2upx;margin-top: 5upx;"></view>
							<view class="comment" @tap="comment(index)">
								<!-- <image src="../../static/dongtai/comment.svg"></image> -->
								<view class="" style="margin: 0 auto;">
									<uni-icons color="#fff" type="chat" size="17"></uni-icons>
									<text class="comment-text">评论</text>
								</view>
							</view>
						</view>
						
					</view>
					<!-- 赞／评论区 -->
					<view class="post-footer" v-if="post.like.length > 0">
						<view class="footer_content" style="margin-top: 0;">
							<!-- <image class="liked" src="../../static/dongtai/zan.svg"></image> -->
							<uni-icons color="#777" type="hand-thumbsup" size="14"></uni-icons>
							<text class="nickname" v-for="(user, index_like) in post.like" :key="index_like">{{ user.username }}</text>
						</view>
						<view class="footer_content" v-for="(comment, comment_index) in post.comments.comment" :key="comment_index" @tap="reply(index, comment_index)">
							<text class="comment-nickname">
								{{ comment.username }} :
								<text class="comment-content">{{ comment.content }}</text>
							</text>
						</view>
					</view>
				</view>
				<!-- 结束 post -->
			</view>

			<view class="foot" v-show="showInput" :style="[{bottom: keyboardHeight}]">
				<chat-input @keyboardheightchange="getKeyboardHeight" @send-message="send_comment" @blur="blur" :focus="focus" :placeholder="input_placeholder"></chat-input>
				<!-- <chat-input @send-message="send_comment" @blur="blur" :placeholder="input_placeholder"></chat-input> -->
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">{{ loadMoreText }}</view>
			<!-- 弹窗 -->
			<uni-popup ref="popup" type="bottom">
				<view class="popup">
					<view class="popup-item popup-title">选择操作</view>
					<view class="popup-item bottom-line" @tap="closePopup">投诉/举报</view>
					<view class="popup-item bottom-line" @tap="closePopup">不看TA的动态</view>
					<view class="popup-item popup-unfollow" @tap="closePopup">取消关注</view>
					<view class="popup-item popup-cancle" @tap="closePopup">取消</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import chatInput from '@/components/im-chat/chatinput.vue'; //input框
import postData from '@/utils/index.post.data.js'; //朋友圈数据
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		chatInput,
		uniPopup,
		uniIcons
	},
	data() {
		return {
			posts: postData, //模拟数据
			user_id: 4,
			username: '小happy',
			keyboardHeight: '',
			index: '',
			comment_index: '',
			
			input_placeholder: '评论', //占位内容
			focus: false, //是否自动聚焦输入框
			is_reply: false, //回复还是评论
			showInput: false, //评论输入框

			screenHeight: '', //屏幕高度(系统)
			platform: '',
			windowHeight: '', //可用窗口高度(不计入软键盘)

			loadMoreText: '加载中...',
			showLoadMore: false,
			currentPost: 0
		};
	},
	mounted() {
		 uni.setNavigationBarTitle({
		　　title: '@ 阿发'
		})
	},
	onLoad() {
		uni.getSystemInfo({
			//获取设备信息
			success: res => {
				this.screenHeight = res.screenHeight;
				this.platform = res.platform;
			}
		});
		uni.startPullDownRefresh();
	},
	onHide() {
		uni.offWindowResize(); //取消监听窗口尺寸变化
	},
	onUnload() {
		(this.max = 0), (this.data = []), (this.loadMoreText = '加载更多'), (this.showLoadMore = false);
	},
	// onReachBottom() {
	// 	//监听上拉触底事件
	// 	console.log('onReachBottom');
	// 	this.showLoadMore = true;
	// 	setTimeout(() => {
	// 		//获取数据
	// 		if (this.posts.length < 20) {
	// 			//测试数据
	// 			this.posts = this.posts.concat(this.posts);
	// 		} else {
	// 			this.loadMoreText = '暂无更多';
	// 		}
	// 	}, 1000);
	// },
	onPullDownRefresh() {
		//监听下拉刷新动作
		console.log('onPullDownRefresh');
		// 这里获取数据
		setTimeout(function() {
			//初始化数据
			uni.stopPullDownRefresh(); //停止下拉刷新
		}, 1000);
	},
	onNavigationBarButtonTap(e) {
		//监听标题栏点击事件
		// if (e.index == 0) {
		// 	this.navigateTo('../publish/publish')
		// }
	},
	computed: {},
	methods: {
		getKeyboardHeight(val){
			// this.keyboardHeight = val + 'px';
			// console.log('++++++',this.keyboardHeight)
			// uni.showToast({
			// 	title: '标题',
			// 	duration: 2000
			// })
		},
		/**
		 * @desc 打开弹窗
		 */
		openPopup() {
			this.$refs.popup.open();
		},
		/**
		 * @desc 关闭弹窗
		 */
		closePopup() {
			this.$refs.popup.close();
		},
		test() {
			this.navigateTo('../test/test');
		},
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		show_win(index,flag) {
			this.posts[this.currentPost].show_window = false;
			this.currentPost = index;
			this.posts[this.currentPost].show_window = flag;
		},
		
		like(index) {
			this.show_win(index,false);
			if (this.posts[index].islike === 0) {
				this.posts[index].islike = 1;
				this.posts[index].like.push({
					uid: this.user_id,
					username: ',' + this.username
				});
			} else {
				this.posts[index].islike = 0;
				this.posts[index].like.splice(
					this.posts[index].like.indexOf({
						uid: this.user_id,
						username: ',' + this.username
					}),
					1
				);
			}
		},
		comment(index) {
			this.show_win(index,false);
			this.showInput = true; //调起input框
			this.focus = true;
			this.index = index;
		},
		reply(index, comment_index) {
			this.is_reply = true; //回复中
			this.showInput = true; //调起input框
			let replyTo = this.posts[index].comments.comment[comment_index].username;
			this.input_placeholder = '回复' + replyTo;
			this.index = index; //post索引
			this.comment_index = comment_index; //评论索引
			this.focus = true;
		},
		blur: function() {
			this.init_input();
		},
		send_comment: function(message) {
			if (this.is_reply) {
				var reply_username = this.posts[this.index].comments.comment[this.comment_index].username;
				var comment_content = '回复' + reply_username + ':' + message.content;
			} else {
				var comment_content = message.content;
			}
			this.posts[this.index].comments.total += 1;
			this.posts[this.index].comments.comment.push({
				uid: this.user_id,
				username: this.username,
				content: comment_content //直接获取input中的值
			});
			this.init_input();
		},
		init_input() {
			this.showInput = false;
			this.focus = false;
			this.input_placeholder = '评论';
			this.is_reply = false;
		},
		previewImage(imageList, image_index) {
			console.log('imageList:', imageList, 'image_index:', image_index);
			var current = imageList[image_index];
			uni.previewImage({
				current: current,
				urls: imageList
			});
		},
		goPublish() {
			uni.navigateTo({
				url: './publish/publish',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		/**
		 * @desc 跳转页面
		 */
		pageTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="less" scoped>
.post-left{
	width: 18upx;
	height: 18upx;
	border: 2px solid #F9A43A;
	border-radius: 18upx;
	margin-top: 22upx;
}
.heart-sign{
	display: flex;
	flex-direction: row;
	padding: 16upx;
	margin-top: 8upx;
	background-color: #F1F1F1;
	box-sizing: border-box;
	text-overflow: ellipsis;
	.heart-sign-img{
		width: 68upx;
		height:  68upx;
	}
	.heart-sign-text{
		font-size: 26upx;
		margin-left: 10upx;
		line-height: 68upx;
	}
}
.liked {
	position: relative;
	margin-right: 10upx;
	width: 24upx;
	height: 24upx;
}
.post_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14upx;
}
.post-username {
	font-size: 40upx;
	font-weight: 500;
	color: #000000;
	line-height: 52upx;
}
.post-time{
	margin-left: 20upx;
	color: #888888;
	font-size: 28upx;
}
.follow {
	color: #999999;
	font-size: 28upx;
	position: relative;
	/*#ifdef APP-PLUS*/
		// right: -16upx;
	/*#endif*/
	/*#ifdef H5 || MP-WEIXIN*/ 
		right: 0;
	/*#endif*/
}
.follow text {
	// margin-right: 18upx;
	font-size: 28upx;
	// font-weight: bold;
}
.paragraph {
	color: #000000;
	font-size: 32upx;
	line-height: 42upx;
	margin-top: 24upx;
}
.gallery_img {
	width: 100%;
	height: 100%;
}

.header {
	width: 100%;
	height: 100%;
	z-index: 10;
	border-radius: 40upx;
}
.publish {
	position: absolute;
	top: 20upx;
	right: 20upx;
}
.right-dot {
	width: 72upx;
	height: 40upx;
	line-height: 36upx;
	background-color: #F1F1F1;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 10upx;
	padding: 0 10upx;
	position: absolute;
	right: 0;
}
.right-window {
	width: 360upx;
	height: 80upx;
	line-height: 80upx;
	box-sizing: border-box;
	background-color: #4d5050;
	border-radius: 10upx;
	position: absolute;
	right: 92upx;
	display: flex;
	z-index: 99;
	// padding: 15upx 22upx;
	flex-direction: row;
	align-items: center;
	text-align: center;
	.like-text,
	.comment-text {
		color: #ffffff;
		font-size: 30upx;
		margin-left: 6upx;
	}
	image {
		width: 30upx !important;
		height: 30upx !important;
		margin-right: 10upx;
	}
}

.post_header {
	width: 80upx !important;
	height: 80upx !important;
	border-radius: 100%;
}
.address {
	margin-top: 16upx;
	color: #44617b;
	font-size: 28upx;
	display: inline-block;
	align-items: center;
	align-items: center;
	text{
		display: inline-block;
	}
	.yuans{
		height: 6upx;
		width: 6upx;
		background-color: #44617b;
		border-radius: 50%;
		margin: 0 8upx;
		position: relative;
		top: -8upx;
	}
}
.timestamp {
	color: #999999;
	font-size: 28upx;
	line-height: 40upx;
}

#moments .home-pic {
	width: 100%;
	/* margin-top: -150upx; */
	position: relative;
	height: 500upx;
	z-index: 5;
	background: url()
		no-repeat center center;
	background-size: cover;
	margin-bottom: 50upx;
}

#moments .home-pic-base {
	position: absolute;
	left: -60upx;
	bottom: -40upx;
	width: 100%;
	height: 160upx;
	padding: 0 30upx;
}

#moments .home-pic-base .top-pic {
	width: 360upx;
	height: 360upx;

	border-radius: 40upx;
	transform: scale(0.5);
	transform-origin: 100% 0%;
	background-color: #ffffff;

	float: right;
}

#moments .home-pic-base .top-name {
	position: absolute;
	/* left: 20px; */
	right: 240upx;
	top: 30upx;
	font-size: 32upx;
	font-weight: 600;
	text-align: right;
	color: #ffffff;
	overflow: hidden;
}

#moments .moments__post {
	background: #fff;
	display: block;
	border-bottom: 1px solid #f2eeee;
	padding: 28upx 26upx;
	position: relative;
	display: flex;
}

#moments .moments__post::before {
	content: none;
}

#moments .moments__post .post_right {
	font-size: 32upx;
	display: table-cell;
	padding-left: 20upx;
	width: 100%;
}

#moments .moments__post .title {
	color: #094dcc;
}

#moments .moments__post .thumbnails {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	line-height: 1;
}

#moments .moments__post .thumbnails .thumbnail {
	width: 166upx;
	height: 166upx;
	background: #757575;
	margin: 4upx;
	overflow: hidden;
	border: 0;
}

.my-gallery {
	width: 250upx;
	height: 400upx;
	margin: 4upx;
	background: #757575;
	overflow: hidden;
}

#moments .moments__post .toolbar {
	margin-top: 8upx;
	display: flex;
	align-items: center;
	height: 42upx;
	line-height: 42upx;
	position: relative;
}

#moments .moments__post .toolbar .timestamp {
	color: #757575;
	font-size: 28upx;
}

#moments .moments__post .like {
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	width: 50%;
	text-align: center;
}
#moments .moments__post .comment {
	width: auto;
	height: auto;
	flex: 1;
	display: flex;
	margin-left: -2upx;
	align-items: center;
	text-align: center;
}

#moments .moments__post .toolbar image {
	// padding-left: 20upx;
	width: 40upx;
	height: 28upx;
}

.post-footer {
	padding:20upx;
	margin-top: 22upx;
	background-color: #FAFAFA;
	width: 100%;
	border-radius: 6upx;
}

#moments .moments__post .footer_content {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 8upx;
}

#moments .moments__post .footer_content .nickname {
	color: #333333;
	font-size: 28upx;
	font-weight: bolder;
	margin-left: 14upx;
}

#moments .moments__post .footer_content .comment-nickname {
	color: #333333;
	font-size: 28upx;
	font-weight: bold;
}

#moments .moments__post .footer_content .comment-content {
	color: #333333;
	font-size: 28upx;
	font-weight: normal;
	margin-left: 10upx;
}

.foot {
	position: fixed;
	width: 100%;
	height: 90upx;
	min-height: 90upx;
	left: 0upx;
	bottom: 0upx;
	overflow: hidden;
}
.uni-loadmore{
	background-color: #FFFFFF;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	font-size: 30upx;
	color: #999;
}
</style>
